<template>
  <div class="Thecockpit">
    <div class=" grid-left">
      <div class="h-200">
        <div class="grid-title">
          <img src="~@img/cockpit/icon-jjzb.png" alt="" />
          <span class="jjzb">经济指标</span>
        </div>

        <el-carousel class="list" indicator-position="none" arrow="never" ref="carousel" :autoplay="true">
          <el-carousel-item v-for="item of lunbodata" :key="item.desc">
            <div class="rotation">
              <span v-if="lunbodata.length > 1" class="btn-span-left" @click="prev"></span>
              <span class="time">{{ item.desc }}</span>
              <span v-if="lunbodata.length > 1" class="btn-span-right" @click="next"></span>
            </div>
            <p class="flex-p">
              <span>
                {{ item.list[0].name }}：
                <strong>{{ item.list[0].nums }}</strong>
              </span>
              <span>
                {{ item.list[1].name }}：
                <strong>{{ item.list[1].nums }}</strong>
              </span>
            </p>
            <p class="flex-p">
              <span>
                {{ item.list[2].name }}：
                <strong>{{ item.list[2].nums }}</strong>
              </span>
              <span>
                {{ item.list[3].name }}：
                <strong> {{ item.list[3].nums }}</strong>
              </span>
            </p>
            <p class="flex-p">
              <span>
                {{ item.list[4].name }}：
                <strong>{{ item.list[4].nums }}</strong>
              </span>
              <span>
                {{ item.list[5].name }}：
                <strong>{{ item.list[5].nums }}</strong>
              </span>
            </p>
            <p class="flex-p">
              <span v-if="item.list[6]">
                {{ item.list[6].name }}：
                <strong>{{ item.list[6].nums }}</strong>
              </span>
              <span v-if="item.list[7]">
                {{ item.list[7].name }}：
                <strong>{{ item.list[7].nums }}</strong>
              </span>
            </p>
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="m-t-1">
        <div class="grid-title">
          <img src="~@img/cockpit/icon-qytj.png" alt="" />
          <span>2023年企业统计</span>
        </div>
        <div class="enter-num-list">
          <p class="p-h32">
            <span @click="goList(1, 1)"> {{ table_data[0].name }}: {{ table_data[0].nums }}家 </span>
            <span class="normal">{{ table_data[1].name }}: {{ table_data[1].nums }} </span>
          </p>
          <p class="p-h32">
            <span @click="goList(1, 2)"> {{ table_data[2].name }}: {{ table_data[2].nums }}家 </span>
            <span @click="goList(1, 3)"> {{ table_data[3].name }}: {{ table_data[3].nums }}家 </span>
          </p>
          <p class="p-h32">
            <span @click="goList(1, 4)"> {{ table_data[4].name }}: {{ table_data[4].nums }}家 </span>
            <span @click="goList(1, 5)"> {{ table_data[5].name }}: {{ table_data[5].nums }}家 </span>
          </p>
          <p class="p-h32">
            <span @click="goList(1, 6)"> {{ table_data[6].name }}: {{ table_data[6].nums }}家 </span>
            <span @click="goList(1, 7)"> {{ table_data[7].name }}: {{ table_data[7].nums }}家 </span>
          </p>
          <p class="p-h32">
            <span @click="goList(2, 1)"> {{ table_data[8].name }}: {{ table_data[8].nums }}所 </span>
            <span @click="goList(2, 2)"> {{ table_data[9].name }}: {{ table_data[9].nums }}所 </span>
          </p>
          <p class="p-h32">
            <span @click="goList(3, 1)"> {{ table_data[10].name }}: {{ table_data[10].nums }}所 </span>
            <span @click="goList(3, 2)"> {{ table_data[11].name }}: {{ table_data[11].nums }}所 </span>
          </p>
        </div>
      </div>
      <div class="h-240 m-t-2">
        <div class="grid-title">
          <img src="~@img/cockpit/icon-cyjgfbtj.png" alt="" />
          <span class="jjzb">产业结构分布统计</span>
          <!-- <span class="jjzb">1-12月签约项目产业分布情况</span> -->
        </div>
        <div class="chart-box">
          <!-- <div class="chart-3d" ref="chart3d"></div> -->
          <div class="chart-box">
            <div class="charts" ref="chart_huan"></div>
            <div class="legend">
              <div>
                <p class="color1">第一产业</p>
              </div>

              <div>
                <p class="color2">第二产业</p>
                <ul>
                  <li class="color21">工业</li>
                  <li class="color22">建筑业</li>
                </ul>
              </div>
              <div>
                <p class="color3">第三产业</p>
                <ul>
                  <li class="color31">批发零售业</li>
                  <li class="color33">金融保险业</li>
                  <li class="color34">房地产业</li>
                  <li class="color35">其他服务业</li>
                  <li class="color32">交通运输仓储和邮政业</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class=" grid-center">
      <div class="center-map">
        <div :class="['whole', district == '太原市' ? 'active' : '']" @click="changeMap">
          <img v-if="district != '太原市'" src="~@img/cockpit/bg-title-normal(1).png" alt="" />
          <img v-if="district == '太原市'" src="~@img/cockpit/icon-total-select.png" alt="" />
          <span>太原市总览</span>
        </div>
        <div class="map-box">
          <div class="charts_map" ref="chart_map"></div>
        </div>
      </div>
      <div class="lun">
        <div class="lun-title">
          <p :class="[activeCard == 1 ? 'active' : '']" @click="changeChart(1)">
            <img v-if="activeCard == 1" class="i-45" src="~@img/cockpit/icon-zsyzzzt-select.png" alt="" />
            <img v-if="activeCard != 1" class="i-45" src="~@img/cockpit/icon-zsyzzzt-normal.png" alt="" />
            <span>招商引资作战图</span>
          </p>
          <p :class="['right-p', activeCard == 2 ? 'active' : '']" @click="changeChart(2)">
            <img v-if="activeCard == 2" src="~@img/cockpit/icon-qyxmje-select.png" alt="" />
            <img v-if="activeCard != 2" src="~@img/cockpit/icon-qyxmje-normal.png" alt="" />
            <span style="margin-right:20px;white-space: nowrap;">签约项目产业分布图</span>
          </p>
        </div>
        <div class="chart-title" v-if="activeCard == 1">
          <img src="~@img/cockpit/icon-mid-left.png" alt="" />
          <span>{{ project_info }}</span>
        </div>
        <div class="chart-title" v-if="activeCard == 2">
          <img src="~@img/cockpit/icon-mid-right.png" alt="" />
          <span>{{ project_right_info }}</span>
        </div>
        <div class="chart-bar" v-if="activeCard == 1">
          <div class="lun-bar" ref="chart_bar"></div>
          <div class="lun-amplify" @click="alertBar"><img src="~@img/cockpit/icon-bigview.png" alt="" />放大视图</div>
        </div>
        <div class="chart-bar" v-if="activeCard == 2">
          <div class="lun-bar" ref="chart_huan"></div>
        </div>
      </div>
    </div>
    <div class=" grid-right">
      <div class="video-info">
        <div class="video">
          <video-player :options="videoOptions" />
        </div>
        <div
          class="detail-info scroll"
          ref="myText"
          @mouseenter="mouseIn('myText')"
          @mouseleave="mouseOut('myText')"
          v-html="getInfoData"
        ></div>
      </div>
      <div class="list-p-j">
        <div class="grid-title clearfix">
          <p :class="[activeList == 1 ? 'active' : '']" @click="activeList = 1">
            <img v-if="activeList != 1" src="~@img/cockpit/icon-zsxm-normal.png" alt="" />
            <img v-if="activeList == 1" src="~@img/cockpit/icon-zsxm-select.png" alt="" />
            <span class="jjzb">重点招商项目</span>
          </p>
          <p :class="[activeList == 2 ? 'active' : '']" @click="activeList = 2">
            <img v-if="activeList != 2" src="~@img/cockpit/icon-zszc-normal.png" alt="" />
            <img v-if="activeList == 2" src="~@img/cockpit/icon-zszc-select.png" alt="" />
            <span class="jjzb">招商政策</span>
          </p>
          <p @click="goPolicy(273)">
            <img src="~@img/cockpit/icon-zszc-normal.png" alt="" />
            <span class="jjzb">太原市投资指南</span>
          </p>
        </div>
        <ul
          class="list-box scroll  project"
          v-show="activeList == 1"
          ref="myList1"
          @mouseenter="mouseIn('myList1')"
          @mouseleave="mouseOut('myList1')"
        >
          <li v-for="item of project" :key="item.id" @click="goProject(item.id)">
            <el-tooltip class="item" effect="light" :content="item.name" placement="top-start">
              <p><img src="~@img/cockpit/icon-linetitle.png" alt="" />{{ item.name }}</p>
            </el-tooltip>
          </li>
          <li style="text-align: center;" v-if="isSend && project.length == 0">
            暂无重点项目
          </li>
        </ul>
        <div class="list-flex" v-show="activeList == 2">
          <div v-show="district == '太原市'">
            <div class="po-title">
              山西省招商政策列表
            </div>
            <ul
              class="list-box scroll policy"
              ref="myList2"
              @mouseenter="mouseIn('myList2')"
              @mouseleave="mouseOut('myList2')"
            >
              <li v-for="item of policy_province" :key="item.id" @click="goPolicy(item.id)">
                <el-tooltip class="item" effect="light" :content="item.name" placement="top-start">
                  <p><img src="~@img/cockpit/icon-linetitle.png" alt="" />{{ item.name }}</p>
                </el-tooltip>
              </li>
            </ul>
          </div>
          <div
            :style="{
              flex: district != '太原市' ? '1' : '0 0 275px',
              'max-width': district != '太原市' ? '555px' : '',
            }"
          >
            <div class="po-title">{{ district }}招商政策列表</div>
            <ul
              class="list-box scroll policy"
              ref="myList3"
              @mouseenter="mouseIn('myList3')"
              @mouseleave="mouseOut('myList3')"
            >
              <li v-for="item of policy" :key="item.id" @click="goPolicy(item.id)">
                <el-tooltip class="item" effect="light" :content="item.name" placement="top-start">
                  <p><img src="~@img/cockpit/icon-linetitle.png" alt="" />{{ item.name }}</p>
                </el-tooltip>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="box-alert" v-if="isAlertBar" @click.stop="isAlertBar = false">
      <div class="chart-alert" @click.stop="">
        <div class="alert-title">
          <img src="~@img/cockpit/icon-mid-left.png" alt="" />
          {{ project_info }}
        </div>
        <img @click="isAlertBar = false" class="close-img" src="~@img/cockpit/icon-alert-close.png" alt="" />
        <div class="alert-bar" ref="chart_alert_bar"></div>
      </div>
    </div>
    <el-dialog title="数据填报提示" :visible.sync="showTB">
      <div class="bh-tips">
        <span class="tips">是否进行载体数据填报？</span>
        <p>注：点击本月无数据，本月将不再提示！</p>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showTB = false">
          本月无数据
        </el-button>
        <el-button type="primary" @click="goFillIn">
          去填报数据
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getInfo, indexlunbo, industrymenu, industryvideo, propol, project, ProjectPdfList } from "@/api/cockpit";
import { ShowLog } from "@api/resources";
import VideoPlayer from "./videoPlayer.vue";
import ty from "@map/ty-index.json";
import dotActive from "@img/public/icon-dot-active.png";
import dotNormal from "@img/public/icon-dot-normal.png";
export default {
  name: "cockpit",
  components: {
    VideoPlayer,
  },
  data() {
    return {
      isSend: false,
      showTB: false,
      chart3D: null,
      chartAlertBar: null,
      chartBar: null,
      chartPie: null,
      district: "太原市",
      activeCard: 1,
      activeList: 1,
      isAlertBar: false,
      // 视频配置
      videoOptions: {
        autoplay: false, //自动播放
        controls: true, //用户可以与之交互的控件
        loop: true, //视频一结束就重新开始
        muted: true, //默认情况下将使所有音频静音
        aspectRatio: "16:9", //显示比率
        fullscreen: {
          options: { navigationUI: "hide" },
        },
        poster: "",
        breakpoints: {
          tiny: 300,
          xsmall: 400,
          small: 500,
          medium: 600,
          large: 700,
          xlarge: 800,
          huge: 900,
        },
        sources: [],
      },
      getInfoData: "",
      lunbodata: [],
      industry: [],
      table_data: [
        {
          name: "优质企业",
          nums: "",
        },
        {
          name: "注册资本",
          nums: "",
        },
        {
          name: "500强企业",
          nums: "",
        },
        {
          name: "上市企业",
          nums: "",
        },
        {
          name: "规模以上工业企业",
          nums: "",
        },
        {
          name: "山西专精特新企业",
          nums: "",
        },
        {
          name: "高新技术企业",
          nums: "",
        },
        {
          name: "科技型中小企业",
          nums: "",
        },
        {
          name: "高等院校",
          nums: "",
        },
        {
          name: "高职专科",
          nums: "",
        },
        {
          name: "科研机构",
          nums: "",
        },
        {
          name: "创新平台",
          nums: "",
        },
      ],
      policy: [],
      policy_province: [],
      project: [],
      project_info: "",
      project_right_info: "",
      nameArr: [],
      barData: [],
      pieData: [],
      // 四个滚动事件定时器
      timer1: null,
      timer2: null,
      timer3: null,
      timer4: null,
    };
  },
  computed: {},
  created() {},
  mounted() {
    this.token = localStorage.getItem("login");
    let isPop = sessionStorage.getItem("isPop") || false;
    if (isPop == false || isPop == "false" || isPop == "") {
      this.ShowLog();
    }
    // 初始化图表
    this.initCharts3D();
    this.initChartsMap();
    this.initChartsBar();
    // this.initChartsPie();

    // 左
    this.getLunBo();
    this.getIndustryMenu();
    //中
    this.getProject();
    // 右
    this.getInfo();
    this.industryVideo();
    this.getPropol();
    this.getProjectPdfList();

    // 设置滚动
    this.setScroll("myText", "timer1", 100, 1);
    this.setScroll("myList1", "timer2", 100, 1);
    this.setScroll("myList2", "timer3", 100, 1);
    this.setScroll("myList3", "timer4", 100, 1);
  },
  methods: {
    goFillIn() {
      this.showTB = false;
      this.$router.push({ name: "filling" });
    },
    // 判断是否展示每月填报提示
    async ShowLog() {
      let res = await ShowLog({
        token: this.token,
        page: "",
        per_page: "",
        filter_time: "",
        pop_flag: true,
      });
      if (res.code == 304) {
        this.showTB = true;
        sessionStorage.setItem("isPop", true);
      } else {
        sessionStorage.setItem("isPop", false);
      }
    },
    // 获取详情
    async getInfo() {
      let res = await getInfo({
        district: this.district,
      });
      if (res.code && res.code != 0) {
        this.getInfoData = "";
      } else {
        this.getInfoData = res;
      }
    },
    // 轮播图
    async getLunBo() {
      var data = {
        district: this.district,
      };
      var res = await indexlunbo(data);
      if (res.code && res.code != 0) {
        this.lunbodata = [];
      } else {
        this.lunbodata = res;
        // this.lunbodata = res.filter((item) => {
        //   return item.desc != "2022年度";
        // });
      }
    },
    // 获取企业数据 和产业结构分布
    async getIndustryMenu() {
      const res = await industrymenu({
        district: this.district,
      });
      if (res.code && res.code != 0) {
      } else {
        this.table_data = res.table_data;
        this.industry = res.industry.map((item) => {
          // return [item.name, item.count, item.per];
          return {
            name: item.name,
            y: item.count,
            per: item.per,
          };
        });
        // this.upData3D(this.industry);
      }
    },
    // 获取视频链接
    async industryVideo() {
      const res = await industryvideo({
        district: this.district,
      });
      if (res.code && res.code != 0) {
      } else {
        this.$set(this.videoOptions.sources, 0, {
          src: res.url,
          type: "video/mp4",
        });
        this.$set(this.videoOptions, "poster", res.image_url);
      }
    },
    // 获取项目、政策列表
    async getPropol() {
      const res = await propol({
        district: this.district,
      });
      if (res.code && res.code != 0) {
        this.policy = [];
        this.policy_province = [];
        // this.project = [];
      } else {
        this.policy = res.policy || [];
        this.policy_province = res.policy_province || [];
        // this.project = res.project || [];
      }
    },
    async getProjectPdfList() {
      let res = await ProjectPdfList({
        district: this.district == "太原市" ? "" : this.district,
      });
      this.isSend = true;
      if (res.code && res.code != 0) {
        this.project = [];
      } else {
        this.project = res || [];
      }
    },
    async getProject() {
      let res = await project({
        district: this.district,
      });
      if (res.code && res.code != 0) {
      } else {
        this.project_info = res.project_info;
        this.project_right_info = res.project_rightinfo;
        // 柱状图数据处理
        let numArr = [];
        let min_v = false;
        if (document.body.offsetWidth < 1600) {
          min_v = true;
        }
        let data = [
          [
            "product",
            min_v ? "签约项目金额完成率（%）                            " : "签约项目金额完成率（%） ",
            "开工项目计划投资额完成率（%）",
            "固投项目资金到位完成率（%）",
          ],
        ];
        res.project_map.map((item) => {
          if (item.name == "综改示范区") {
          } else {
            data.push([item.name, item.add1, item.add2, item.add3]);
            numArr.push([
              "签约项目金额（亿元）： " + item.nums1,
              "开工项目计划投资额（亿元）： " + item.nums2,
              "固定资产投资项目资金到位额（亿元）：" + item.nums3,
            ]);
          }
        });
        this.numArr = numArr;
        this.barData = data;
        this.upDataBar(data, 1);
        // 环状饼状图数据处理
        let pieData = [];
        res.project_industry.map((item) => {
          return pieData.push({
            value: item.money,
            number: item.number,
            name: item.name,
          });
        });
        this.pieData = pieData;
      }
    },
    goProject(id) {
      this.$router.push({
        name: "keyproject",
        params: { activeMenu: "cockpit", id },
      });
    },
    goPolicy(id) {
      this.$router.push({
        name: "policy",
        params: { activeMenu: "cockpit", id },
      });
    },
    goList(classify, type) {
      //  classify=1&type=3&district=太原市
      if (classify == 1) {
        this.$router.push({
          name: "eplist",
          params: {
            activeMenu: "cockpit",
            type,
            district: this.district,
          },
        });
      } else if (classify == 2) {
        this.$router.push({
          name: "schoolList",
          params: {
            activeMenu: "cockpit",
            type,
            district: this.district,
          },
        });
      } else if (classify == 3) {
        this.$router.push({
          name: "platform",
          params: {
            activeMenu: "cockpit",
            type,
            district: this.district,
          },
        });
      }
    },
    // 设置滚动条
    set() {
      // 滚动条从头滚动
      this.timer2 ? clearInterval(this.timer2) : "";
      this.$refs["myText"].scrollTop = 0;
      this.setScroll("myText", "timer1", 100, 1);

      this.timer1 ? clearInterval(this.timer1) : "";
      this.$refs["myList1"].scrollTop = 0;
      this.setScroll("myList1", "timer2", 100, 1);
      this.timer3 ? clearInterval(this.timer3) : "";
      this.$refs["myList2"].scrollTop = 0;
      this.setScroll("myList2", "timer3", 100, 1);
      this.timer4 ? clearInterval(this.timer4) : "";
      this.$refs["myList2"].scrollTop = 0;
      this.setScroll("myList3", "timer4", 100, 1);
    },
    // 设置滚动
    /* ref   : 滚动节点   */
    /* timer : 定时器     */
    /* speed : 滚动间隔   */
    /* step  : 滚动步长   */
    setScroll(ref, timer, speed = 100, step = 1) {
      let text = this.$refs[ref];
      let top = "";
      if (this[timer]) {
        clearInterval(this[timer]);
      }
      this[timer] = setInterval(() => {
        text.scrollTop += step;
        if (text.scrollTop == top) {
          text.scrollTop = 0;
        }
        top = text.scrollTop;
      }, speed);
    },
    // 节点移入取消滚动
    mouseIn(ref) {
      if (ref == "myText" && this.timer1) {
        clearInterval(this.timer1);
      } else if (ref == "myList1" && this.timer2) {
        clearInterval(this.timer2);
      } else if (ref == "myList2" && this.timer3) {
        clearInterval(this.timer3);
      } else if (ref == "myList3" && this.timer4) {
        clearInterval(this.timer4);
      }
    },
    // 节点移出设置滚动
    mouseOut(ref) {
      if (ref == "myText") {
        this.setScroll("myText", "timer1", 100, 1);
      } else if (ref == "myList1") {
        this.setScroll("myList1", "timer2", 100, 1);
      } else if (ref == "myList2") {
        this.setScroll("myList2", "timer3", 100, 1);
      } else if (ref == "myList3") {
        this.setScroll("myList3", "timer4", 100, 1);
      }
    },
    changeMap() {
      if (this.district == "太原市") {
        return;
      }
      this.chartMap.dispatchAction({
        type: "downplay",
        seriesName: "行政区",
      });
      this.chartMap.dispatchAction({
        type: "downplay",
        seriesName: "开发区",
      });
      this.chartMap.dispatchAction({
        type: "unselect",
        seriesName: "行政区",
      });
      this.chartMap.dispatchAction({
        type: "unselect",
        seriesName: "开发区",
      });

      this.district = "太原市";

      // 左
      this.getLunBo();
      this.getIndustryMenu();

      // 右
      this.getInfo();
      this.industryVideo();
      this.getPropol();
      this.getProjectPdfList();

      this.$message.success("成功切换至太原市");
    },
    alertBar() {
      this.isAlertBar = true;
      this.$nextTick(() => {
        this.initChartsAlertBar();
      });
    },
    prev() {
      this.$refs.carousel.prev();
    },
    next() {
      this.$refs.carousel.next();
    },
    changeChart(type) {
      this.activeCard = type;
      setTimeout(() => {
        if (type == 1) {
          this.initChartsBar();
          this.upDataBar(this.barData, 1);
        } else {
          this.initChartsPie();
          this.upDataPie(this.pieData);
        }
      }, 100);
    },
    // initCharts3D() {
    //   this.chart3D = this.$Highcharts.chart(this.$refs.chart3d, {
    //     colors: [
    //       "#2451ff",
    //       "#5aadd4",
    //       "#b35aff",
    //       "#fb3878",
    //       "#fabc24",
    //       "#25bd97",
    //       "#11a1da",
    //     ],
    //     credits: {
    //       enabled: false,
    //     },
    //     tooltip: {
    //       backgroundColor: "#fff",
    //       borderRadius: 10,
    //       shadow: true,
    //       borderColor: "#fff",
    //       useHTML: true,
    //       formatter: function() {
    //         return (
    //           "<span style='display:inline-block;background:" +
    //           this.point.color +
    //           ";height:10px; width:10px;border-radius:50%;margin-right:10px'></span>" +
    //           this.key +
    //           ":" +
    //           this.y +
    //           "家"
    //         );
    //       },
    //     },
    //     chart: {
    //       type: "pie",
    //       backgroundColor: "rgba(0,0,0,0)",
    //       options3d: {
    //         enabled: true,
    //         alpha: 30,
    //       },
    //     },
    //     title: {
    //       show: false,
    //       text: "",
    //     },
    //     legend: {
    //       layout: "vertical",
    //       x: 100,
    //       verticalAlign: "middle",
    //       padding: 0,
    //       itemMarginTop: 2,
    //       itemMarginBottom: 2,
    //       squareSymbol: true,
    //       itemStyle: {
    //         color: "#fff",
    //         fontSize: 14,
    //         fontWeight: 400,
    //         lineHeight: 10,
    //       },
    //       itemHoverStyle: {
    //         color: "#d1eaff",
    //       },
    //       labelFormatter: function() {
    //         return `&nbsp;${this.name}  ${this.per}%`;
    //       },
    //     },
    //     plotOptions: {
    //       pie: {
    //         allowPointSelect: true,
    //         center: ["25%", "50%"],
    //         innerSize: 80,
    //         depth: 60,
    //         dataLabels: {
    //           enabled: true,
    //           distance: "-10%",
    //           color: "#fff",
    //           fontSize: 12,
    //           fontWeight: 400,
    //           format: "{point.per} %",
    //         },
    //         showInLegend: true,
    //       },
    //     },
    //     series: [
    //       {
    //         name: "占比",
    //         data: [],
    //       },
    //     ],
    //   });
    // },
    upData3D(data) {
      this.chart3D.series[0].setData(data);
    },
    initChartsMap() {
      this.chartMap = this.$echarts.init(this.$refs.chart_map);
      this.$echarts.registerMap("ty", ty);
      const initOption = {
        backgroundColor: "rgba(0,0,0,0)",
        title: {
          show: false,
        },
        grid: {
          top: "0",
          bottom: "0",
          left: "0",
          right: "25%",
        },
        geo: {
          type: "map",
          map: "ty",
          zoom: 1.2,
          geoIndex: 0,
          label: {
            show: true,
            color: "rgba(255,255,255,.5)",
            textBorderColor: "#2953a8",
            textBorderWidth: 1,
            formatter: function(params) {
              //标签内容
              return "{normalIcon|}" + " " + params.name;
            },
            rich: {
              normalIcon: {
                backgroundColor: {
                  image: dotNormal,
                },
              },
              activeIcon: {
                // margin: [0, 15, 0, 15],
                backgroundColor: {
                  image: dotActive,
                },
              },
            },
            fontSize: 16,
            // position: "insideBottom",
          },
          select: {
            itemStyle: {
              color: "rgba(44, 173, 255, 0.9)",
            },
            label: {
              show: true,
              color: "#fff",
              textBorderColor: "#2953a8",
              textBorderWidth: 1,
            },
          },
          itemStyle: {
            areaColor: {
              //地图色
              type: "radial",
              x: 0.5,
              y: 0.5,
              r: 0.5,
              colorStops: [
                {
                  offset: 0,
                  color: "rgba(44, 173, 255, 0)", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "rgba(44, 173, 255, 0.1)", // 100% 处的颜色
                },
              ],
              global: false, // 缺省为 false
            },
            // areaColor: "rgba(44, 173, 255, 0.1)",
            borderColor: "rgba(44, 173, 255, 0.9)",
            borderWidth: 2,
            shadowColor: "rgba(44, 173, 255, 0.9)",
            shadowOffsetX: -2,
            shadowOffsetY: 2,
            shadowBlur: 4,
            // shadowColor: "rgba(44, 173, 255, 1)",
            // shadowOffsetX: 0,
            // shadowOffsetY: 10,
            // opacity: 0.9,
          },
          emphasis: {
            label: {
              show: true,
              color: "#fff",
              textBorderColor: "#2953a8",
              textBorderWidth: 1,
              formatter: function(params) {
                //标签内容
                return "{activeIcon|}" + " " + params.name;
              },
            },
            itemStyle: {
              areaColor: "rgba(44, 173, 255, 0.9)",
              label: {
                show: true,
                color: "#fff",
              },
              borderWidth: 0,
            },
          },
        },
        series: [
          {
            name: "行政区",
            type: "map",
            map: "ty",
            geoIndex: 0,
            animation: false,
            label: {
              position: "right",
              offset: [30, 40],
            },
            // layoutCenter: ["60%", "50%"],
            // layoutSize: "100%",
            data: [
              { label: "小店区", value: "小店区" },
              { label: "迎泽区", value: "迎泽区" },
              { label: "杏花岭区", value: "杏花岭区" },
              { label: "万柏林区", value: "万柏林区" },
              { label: "尖草坪区", value: "尖草坪区" },
              { label: "晋源区", value: "晋源区" },
              { label: "古交市", value: "古交市" },
              { label: "清徐县", value: "清徐县" },
              { label: "阳曲县", value: "阳曲县" },
              { label: "娄烦县", value: "娄烦县" },
            ],
          },
          {
            name: "开发区",
            type: "scatter",
            // type: "effectScatter",
            coordinateSystem: "geo",
            data: [
              {
                name: "综改示范区",
                value: [112.607110472037, 37.7408814836355, 180],
              },
              {
                name: "中北高新区",
                value: [112.570721979812, 37.9718734652464, 180],
              },
              {
                name: "清徐开发区",
                value: [112.365286246971, 37.6133580518845, 180],
              },
              {
                name: "阳曲示范区",
                value: [112.679409, 38.064621, 180],
              },
              {
                name: "西山示范区",
                value: [112.526291497339, 37.872764219517, 180],
              },
            ],
            symbolSize: function(val) {
              return val[2] / 20;
            },
            showEffectOn: "render",
            rippleEffect: {
              brushType: "stroke",
            },
            // hoverAnimation: true,
            label: {
              show: true,
              // formatter: "  {b}",
              position: "right",
              color: "rgba(255,255,255,.6)",
              textBorderColor: "#2953a8",
              textBorderWidth: 1,
              fontSize: 14,
              formatter: function(params) {
                //标签内容
                return params.name;
              },
            },
            select: {
              itemStyle: {
                color: "rgba(255,255,255)",
              },
              label: {
                show: true,
                color: "#fff",
                textBorderColor: "#2953a8",
                textBorderWidth: 1,
                formatter: function(params) {
                  //标签内容
                  return params.name;
                },
              },
            },
            itemStyle: {
              color: "rgba(255,255,255, 0.67)",
              shadowBlur: 10,
              shadowColor: " rgba(255,255,255, 0.2)",
            },
            emphasis: {
              label: {
                show: true,
                color: "#fff",
                textBorderColor: "#2953a8",
                textBorderWidth: 1,
                formatter: function(params) {
                  //标签内容
                  return params.name;
                },
              },
              itemStyle: {
                color: "rgba(255,255,255)",
                shadowBlur: 10,
                shadowColor: " rgba(255,255,255, 0.2)",
              },
            },
            selectedMode: "single",
            zlevel: 1,
          },
        ],
      };
      this.chartMap.setOption(initOption);
      // 地图点击事件
      this.chartMap.on("click", (item) => {
        if (this.district == item.name) {
          return;
        }
        this.activeOverView = false;
        this.chartMap.dispatchAction({
          type: "downplay",
          seriesName: "行政区",
        });
        this.chartMap.dispatchAction({
          type: "downplay",
          seriesName: "开发区",
        });
        this.chartMap.dispatchAction({
          type: "unselect",
          seriesName: "行政区",
        });
        this.chartMap.dispatchAction({
          type: "unselect",
          seriesName: "开发区",
        });
        if (item.componentSubType == "scatter") {
          this.chartMap.dispatchAction({
            type: "highlight",
            seriesName: "开发区",
            dataIndex: item.dataIndex,
          });
          this.district = item.name;
          // 左
          this.getLunBo();
          this.getIndustryMenu();
          // 右
          this.getInfo();
          this.industryVideo();
          this.getPropol();
          this.getProjectPdfList();
        }
        if (item.componentSubType == "map") {
          this.chartMap.dispatchAction({
            type: "highlight",
            seriesName: "行政区",
            dataIndex: item.dataIndex,
          });
          this.district = item.name;
          // 左
          this.getLunBo();
          this.getIndustryMenu();
          // 右
          this.getInfo();
          this.industryVideo();
          this.getPropol();
          this.getProjectPdfList();
        }

        this.$message({
          message: "成功切换至" + item.name,
          type: "success",
        });
      });
      // this.chartSelect(this.chartMap);
    },
    // 初始化--3D饼图--产业结构分布  highCharts
    initCharts3D() {
      this.chart3DHuan = this.$echarts.init(this.$refs.chart_huan);
      let option = {
        tooltip: {
          trigger: "item",
          formatter: "{b}<br/>增加值：{c}亿元<br/>占比： {d}% ",
        },
        series: [
          {
            name: "行业",
            type: "pie",
            selectedMode: "single",
            center: ["30%", "50%"],
            radius: ["30%", "60%"],
            label: {
              show: false,
              position: "inner",
              fontSize: 14,
            },
            labelLine: {
              show: false,
            },
            data: [
              {
                value: 48.07,
                name: "第一产业",
                itemStyle: { color: "#0263ff" },
              },

              {
                value: 1969.15,
                name: "工业",
                itemStyle: { color: "#ff2800" },
              },
              {
                value: 496.95,
                name: "建筑业",
                itemStyle: { color: "#00d3ff" },
              },
              {
                value: 459.75,
                name: "批发零售业",
                itemStyle: { color: "#ffc02d" },
              },
              {
                value: 220.82,
                name: "交通运输仓储和邮政业",
                itemStyle: { color: "#2cd9c5" },
              },
              {
                value: 529.82,
                name: "金融保险业",
                itemStyle: { color: "#b76100" },
              },
              {
                value: 296.66,
                name: "房地产业",
                itemStyle: { color: "#68c400" },
              },
              {
                value: 1549.95,
                name: "其他服务业",
                itemStyle: { color: "#e91cd5" },
              },
            ],
          },
          {
            name: "产业",
            type: "pie",
            center: ["30%", "50%"],
            radius: ["60%", "80%"],
            label: {
              show: true,
              position: "inner",
              fontSize: 14,
              color: "#fff",
            },
            labelLine: {
              show: false,
            },
            data: [
              {
                value: 48.07,
                name: "第一产业",
                itemStyle: { color: "#0263ff" },
              },
              {
                value: 2466.1,
                name: "第二产业",
                itemStyle: { color: "#ff7723" },
              },
              {
                value: 3057.0,
                name: "第三产业",
                itemStyle: { color: "#8e30ff" },
              },
            ],
          },
        ],
      };
      this.chart3DHuan.setOption(option);
    },
    // 初始化--环状图--已签约项目投资金额分布  Echarts
    initChartsPie() {
      this.chartPie = this.$echarts.init(this.$refs.chart_huan);
      const initOption = {
        color: ["#fb3878", "#fdbe24", "#f4954f", "#462af6", "#b33ecc", "#25bd97", "#00d3ff"],
        tooltip: {
          trigger: "item",
          formatter: function(params) {
            console.log(params);
            return (
              params.marker + " " + params.name + " ： " + params.data.value + "亿元  " + params.data.number + "个项目"
            );
          },
        },
        legend: {
          top: "12%",
          right: "10%",
          icon:
            "path://M830.464 63.488q26.624 0 50.176 12.288t41.472 31.232 28.672 43.008 10.752 46.592l0 635.904q0 23.552-11.264 46.592t-30.208 41.472-43.008 30.208-48.64 11.776l-641.024 0q-22.528 0-44.544-10.752t-39.424-28.16-28.16-40.96-10.752-50.176l0-633.856q0-25.6 10.752-50.176t29.696-43.52 43.52-30.208 52.224-11.264l629.76 0z",
          orient: "vertical",
          align: "auto",
          itemGap: 8,
          textStyle: {
            rich: {
              a: {
                fontSize: 14,
                verticalAlign: "top",
                align: "center",
              },
            },
            color: "#fff",
            fontSize: 14,
          },
        },
        series: [
          {
            type: "pie",
            center: ["25%", "50%"],
            radius: ["30%", "70%"],
            labelLine: {
              show: true,
              length: 10,
              length2: 60,
              smooth: false,
              showAbove: true,
              lineStyle: { cap: "round" },
            },
            label: {
              // formatter: "{a|{d}% }\n",
              formatter: function(params) {
                // {a|" +   params.percent +   "% }
                return " {b| " + params.data.number + "个项目}";
              },
              //折线图文字颜色
              color: "#fffdef",
              rich: {
                //圆点位置大小配置
                hr: {
                  //auto自定义
                  backgroundColor: "inherit",
                  borderRadius: 3,
                  width: 3,
                  height: 3,
                  padding: [3, 3, 0, -12],
                },
                a: {
                  padding: [-40, -50, -20, -50],
                },
                b: {
                  padding: [-4, -50, -20, -4],
                },
              },
              color: "#fff",
            },
            selectedMode: "single",
          },
        ],
      };
      this.chartPie.setOption(initOption);
      this.chartPie.on("legendselectchanged", function(obj) {
        const { selected, name } = obj;
        selected[name] = true;
        let option = {
          legend: {
            selected: selected,
          },
        };
        this.setOption(option);
        this.dispatchAction({
          type: "select",
          name: name,
        });
      });
    },
    // 初始化--柱状图--招商引资作战图  Echarts
    initChartsBar() {
      let min_v = false;
      if (document.body.offsetWidth < 1600) {
        min_v = true;
      }
      this.chartBar = this.$echarts.init(this.$refs.chart_bar);
      let initOption = {
        backgroundColor: "rgba(0,0,0,0)",
        color: ["#fbc609", "#87d370", "#dc22c0"],
        grid: {
          top: "15%",
          left: "10%",
          bottom: "40%",
          right: "6%",
        },
        title: {
          show: false,
        },
        dataZoom: [
          {
            start: 0,
            end: 50,
            bottom: min_v ? "24%" : "20%",
            textStyle: {
              color: "rgba(255, 255, 255, 1)",
            },
            height: min_v ? 20 : 30,
          },
          {
            type: "inside",
          },
        ],

        legend: {
          type: "plain",
          orient: "horizontal",
          show: true,
          bottom: min_v ? 6 : 20,
          itemGap: 4,
          textStyle: {
            fontSize: min_v ? 12 : 13,
            color: "#fff",
          },
        },
        xAxis: {
          type: "category",
          minInterval: 7,
          interval: 500, //每次增加几个
          axisLine: {
            lineStyle: {
              color: "#034E90",
              width: 1,
            },
          },
          axisTick: {
            show: false,
          },
          splitArea: {
            show: true,
            areaStyle: {
              color: ["rgba(3, 78, 144,0.1)", "rgba(3, 78, 144,0.1)"],
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              // 使用深浅的间隔色
              color: "#034E90",
              width: 1,
            },
          },
          axisLabel: {
            show: true,
            color: "#9FCEFF",
            align: "center",
            fontSize: 11,
            interval: 0,
            formatter: function(value) {
              // if (value.length < 5) {
              var str = " " + value;
              // } else {
              //   var str =
              //     value.substr(0, 5) +
              //     "\n" +
              //     value.substr(5, 4) +
              //     "\n" +
              //     value.substr(8);
              // }

              return str;
            },
          },
        },
        yAxis: {
          type: "value",
          minInterval: 12,
          name: "%",
          color: "#9FCEFF",
          nameTextStyle: {
            color: "#9FCEFF",
          },
          // interval: 100, //每次增加几个
          axisLine: {
            show: true,
            lineStyle: {
              color: "#034E90",
              width: 1,
            },
          },
          axisLabel: {
            show: true,
            color: "#9FCEFF",
          },
          splitLine: {
            show: true,
            lineStyle: {
              // 使用深浅的间隔色
              color: "#034E90",
              width: 1,
            },
          },
        },
        series: [
          {
            type: "bar",
            barWidth: 10, //柱图宽度
            itemStyle: {
              //柱形图圆角，初始化效果
              borderRadius: [10, 10, 0, 0],
              tooltip: {
                formatter: "{a1}:",
              },
            },
            markLine: {
              silent: true,
              symbol: "none",
              lineStyle: {
                type: "solid",
                width: 2,
              },
              data: [],
            },
          },
          {
            type: "bar",
            barWidth: 10, //柱图宽度
            itemStyle: {
              //柱形图圆角，初始化效果
              borderRadius: [10, 10, 0, 0],
            },
          },
          {
            type: "bar",
            barWidth: 10, //柱图宽度
            itemStyle: {
              borderRadius: [10, 10, 0, 0],
            },
          },
        ],
      };
      this.chartBar.setOption(initOption);
    },

    initChartsAlertBar() {
      this.chartAlertBar = this.$echarts.init(this.$refs.chart_alert_bar);
      let initOption = {
        backgroundColor: "rgba(0,0,0,0)",
        color: ["#fbc609", "#87d370", "#dc22c0"],
        grid: {
          top: "15%",
          left: "10%",
          bottom: "40%",
          right: "6%",
        },
        title: {
          show: false,
        },
        legend: {
          type: "plain",
          orient: "horizontal",
          show: true,
          bottom: 20,
          itemGap: 10,
          textStyle: {
            fontSize: 14,
            color: "#fff",
          },
        },
        xAxis: {
          type: "category",
          minInterval: 7,
          interval: 500, //每次增加几个
          axisLine: {
            lineStyle: {
              color: "#034E90",
              width: 1,
            },
          },
          axisTick: {
            show: false,
          },
          splitArea: {
            show: true,
            areaStyle: {
              color: ["rgba(3, 78, 144,0.1)", "rgba(3, 78, 144,0.1)"],
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              // 使用深浅的间隔色
              color: "#034E90",
              width: 1,
            },
          },
          axisLabel: {
            show: true,
            color: "#9FCEFF",
            align: "center",
            fontSize: 11,
            interval: 0,
            formatter: function(value) {
              // if (value.length < 5) {
              var str = " " + value;
              // } else {
              //   var str =
              //     value.substr(0, 5) +
              //     "\n" +
              //     value.substr(5, 4) +
              //     "\n" +
              //     value.substr(8);
              // }

              return str;
            },
          },
        },
        yAxis: {
          type: "value",
          minInterval: 12,
          name: "%",
          color: "#9FCEFF",
          nameTextStyle: {
            color: "#9FCEFF",
          },
          // interval: 100, //每次增加几个
          axisLine: {
            show: true,
            lineStyle: {
              color: "#034E90",
              width: 1,
            },
          },
          axisLabel: {
            show: true,
            color: "#9FCEFF",
          },
          splitLine: {
            show: true,
            lineStyle: {
              // 使用深浅的间隔色
              color: "#034E90",
              width: 1,
            },
          },
        },
        series: [
          {
            type: "bar",
            barWidth: 10, //柱图宽度
            itemStyle: {
              //柱形图圆角，初始化效果
              borderRadius: [10, 10, 0, 0],
              tooltip: {
                formatter: "{a1}:",
              },
            },
            markLine: {
              silent: true,
              symbol: "none",
              lineStyle: {
                type: "solid",
                width: 2,
              },
              data: [],
            },
          },
          {
            type: "bar",
            barWidth: 10, //柱图宽度
            itemStyle: {
              //柱形图圆角，初始化效果
              borderRadius: [10, 10, 0, 0],
            },
          },
          {
            type: "bar",
            barWidth: 10, //柱图宽度
            itemStyle: {
              borderRadius: [10, 10, 0, 0],
            },
          },
        ],
      };
      this.chartAlertBar.setOption(initOption);
      let barData = [...this.barData];
      barData[0] = [
        "product",
        "签约项目金额完成率（%）",
        "开工项目计划投资额完成率（%）",
        "固投项目资金到位完成率（%）",
      ];
      this.upDataBar(barData, 2);
    }, // 更新柱状图数据
    upDataBar(data, type) {
      let option = {};
      if (document.body.offsetWidth < 1399) {
        option = {
          tooltip: {
            // trigger: 'item',
            // axisPointer: { // 坐标轴指示器，坐标轴触发有效
            //     type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            // }
            // trigger: 'axis',
            formatter: (e) => {
              var { dataIndex, componentIndex } = e;
              var str =
                e.name +
                "</br>" +
                e.seriesName +
                "： " +
                e.value[e.componentIndex + 1] +
                "%</br>" +
                this.numArr[dataIndex][componentIndex];
              return str;
            },
          },
          legend: {
            type: "plain",
            orient: "horizontal",
            show: true,
            bottom: 0,
            itemGap: 4,
            textStyle: {
              fontSize: 10,
              color: "#fff",
            },
          },
          grid: {
            top: "15%",
            left: "10%",
            bottom: "44%",
            right: "6%",
          },
          dataZoom: [
            {
              start: 0,
              end: 25,
              bottom: "18%",
              textStyle: {
                color: "rgba(255, 255, 255, 1)",
              },
            },
            {
              type: "inside",
            },
          ],
          dataset: {
            source: data,
          },
        };
      } else {
        option = {
          tooltip: {
            // trigger: 'item',
            // axisPointer: { // 坐标轴指示器，坐标轴触发有效
            //     type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            // }
            // trigger: 'axis',
            formatter: (e) => {
              var { dataIndex, componentIndex } = e;
              var str =
                e.name +
                "</br>" +
                e.seriesName +
                "： " +
                e.value[e.componentIndex + 1] +
                "%</br>" +
                this.numArr[dataIndex][componentIndex];
              return str;
            },
          },
          grid: {
            top: "12%",
            bottom: "45%",
          },
          dataset: {
            source: data,
          },
        };
      }

      if (type == 1) {
        this.chartBar.setOption(option);
      } else {
        this.chartAlertBar.setOption(option);
      }
    },
    upDataPie(data) {
      if (document.body.offsetWidth < 1390) {
        let option = {
          legend: {
            top: "2%",
            bottom: "2%",
            type: "plain", // type: "scroll",
            orient: "vertical",
            right: "2%",
            itemGap: 8,
            textStyle: {
              rich: {
                a: {
                  fontSize: 10,
                  verticalAlign: "top",
                  align: "center",
                },
              },
              color: "#fff",
              fontSize: 10,
            },
          },
          series: [
            {
              center: ["25%", "50%"],
              radius: ["20%", "40%"],
              labelLine: {
                show: true,
                length: 8,
                length2: 30,
                smooth: false,
                showAbove: true,
                lineStyle: { cap: "round" },
              },
              label: {
                // formatter: "{a|{d}% }\n",
                formatter: function(params) {
                  // {a|" +   params.percent +   "% }
                  return " {b| " + params.data.number + "个项目}";
                },
                //折线图文字颜色
                color: "#fffdef",
                rich: {
                  //圆点位置大小配置
                  hr: {
                    //auto自定义
                    backgroundColor: "inherit",
                    borderRadius: 3,
                    width: 3,
                    height: 3,
                    padding: [3, 3, 0, -12],
                  },
                  a: {
                    padding: [-40, -50, -20, -50],
                  },
                  b: {
                    padding: [-4, -50, -20, -4],
                  },
                },
                color: "#fff",
              },
              data: data,
            },
          ],
        };
        this.chartPie.setOption(option);
      } else if (document.body.offsetWidth > 1390 && document.body.offsetWidth < 1530) {
        let option = {
          legend: {
            top: "2%",
            bottom: "2%",
            type: "scroll",
            orient: "vertical",
            right: "2%",
            itemGap: 8,
            textStyle: {
              rich: {
                a: {
                  fontSize: 10,
                  verticalAlign: "top",
                  align: "center",
                },
              },
              color: "#fff",
              fontSize: 10,
            },
          },
          series: [
            {
              center: ["25%", "50%"],
              radius: ["40%", "65%"],
              labelLine: {
                show: true,
                length: 8,
                length2: 30,
                smooth: false,
                showAbove: true,
                lineStyle: { cap: "round" },
              },
              label: {
                // formatter: "{a|{d}% }\n",
                formatter: function(params) {
                  // {a|" +   params.percent +   "% }
                  return " {b| " + params.data.number + "个项目}";
                },
                //折线图文字颜色
                color: "#fffdef",
                rich: {
                  //圆点位置大小配置
                  hr: {
                    //auto自定义
                    backgroundColor: "inherit",
                    borderRadius: 3,
                    width: 3,
                    height: 3,
                    padding: [3, 3, 0, -12],
                  },
                  a: {
                    padding: [-40, -50, -20, -50],
                  },
                  b: {
                    padding: [-4, -50, -20, -4],
                  },
                },
                color: "#fff",
              },
              data: data,
            },
          ],
        };
        this.chartPie.setOption(option);
      } else {
        let option = {
          // legend: {
          // formatter: function(name) {
          //   var total = 0;
          //   var target;
          //   for (var i = 0, l = data.length; i < l; i++) {
          //     total += data[i].value;
          //     if (data[i].name == name) {
          //       target = data[i].value;
          //     }
          //   }
          //   var arr = ["{a|" + name + " , " + target + "亿元}"];
          //   //  , " + ((target / total) * 100).toFixed(2) + "%
          //   return arr.join("\n");
          // },
          // },
          series: [
            {
              data: data,
            },
          ],
        };
        this.chartPie.setOption(option);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.Thecockpit {
  padding: 0 30px 20px;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr 1.24fr 1fr;
  grid-row-gap: 20px;
  grid-column-gap: 20px;
  text-align: left;
  overflow: hidden;
  background: transparent;
}
.grid-left {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  grid-row-gap: 16px;
}
.grid-left > div {
  background: url("~@img/cockpit/bg-content-left.png") no-repeat;
  background-size: 100% 100%;
  .grid-title {
    height: 42px;
    img {
      width: 42px;
      height: 42px;
      vertical-align: middle;
    }
    span {
      font-size: 20px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #ffffff;
      line-height: 36px;
      background: linear-gradient(0deg, #bdedff 0%, #e7efff 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      vertical-align: middle;
      cursor: default;
      &.jjzb {
        margin-right: 38px;
      }
    }
  }
  .list,
  /deep/ .el-carousel__container {
    height: 210px;
  }
  .flex-p {
    height: 40px;
    line-height: 40px;
    display: flex;
    flex-wrap: wrap;
    border-top: 1px solid rgba(0, 143, 253, 0.2);
    border-bottom: 1px solid rgba(0, 143, 253, 0.2);
    background: rgba(113, 205, 249, 0.1);
    cursor: default;
    &:nth-of-type(2n) {
      background: transparent;
      border: none;
    }
    span {
      flex: 1;
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #def1ff;
      white-space: nowrap;

      &:first-of-type {
        margin-left: 18px;
      }
    }
  }
  .p-h32 {
    display: flex;
    height: 32px;
    line-height: 32px;
    background: transparent;
    border: none;

    &:nth-of-type(2n) {
      border-top: 1px solid rgba(0, 143, 253, 0.2);
      border-bottom: 1px solid rgba(0, 143, 253, 0.2);
      background: rgba(113, 205, 249, 0.1);
    }
    span {
      margin-left: 18px;

      flex: 1;
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #def1ff;
      cursor: pointer;
      &.normal {
        cursor: default;
      }
    }
  }
  .rotation {
    height: 40px;
    line-height: 40px;
    text-align: center;
    span {
      vertical-align: middle;
    }
    .btn-span-left {
      display: inline-block;
      width: 0;
      height: 0;
      line-height: 0;
      border-top: 7px solid transparent;
      border-bottom: 7px solid transparent;
      border-right: 8px solid #818b99;
    }
    .btn-span-right {
      display: inline-block;
      width: 0;
      height: 0;
      line-height: 0;
      border-top: 7px solid transparent;
      border-bottom: 7px solid transparent;
      border-left: 8px solid #818b99;
    }
    .time {
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #ffffff;
      margin: 0 50px;
    }
  }
  .enter-num-list {
    margin-top: 4px;
  }
  .chart-box {
    position: relative;
    width: 100%;
    height: 200px;
    .charts {
      width: 100%;
      height: 100%;
    }

    .legend {
      position: absolute;
      right: 0;
      top: 0;
      color: #fff;
      width: 45%;
      p {
        margin-top: 10px;
        position: relative;
        font-size: 14px;
        &::after {
          content: "";
          position: absolute;
          left: -16px;
          top: 4px;
          display: inline-block;
          width: 14px;
          height: 14px;
          background: #fff;
        }
        &.color1::after {
          background: #0263ff;
        }
        &.color2::after {
          background: #ff7723;
        }
        &.color3::after {
          background: #8e30ff;
        }
      }
      ul {
        display: flex;
        flex-wrap: wrap;
        li {
          box-sizing: border-box;
          padding-left: 20px;
          margin: 4px 0 2px;
          position: relative;
          flex: 0 0 50%;
          font-size: 12px;
          &.color32 {
            flex: 1;
          }
          &::after {
            content: "";
            position: absolute;
            left: 2px;
            top: 4px;
            display: inline-block;
            width: 12px;
            height: 12px;
            border-radius: 6px;
            background: #fff;
          }
          &.color21::after {
            background: #ff2800;
          }
          &.color22::after {
            background: #00d3ff;
          }
          &.color31::after {
            background: #ffc02d;
          }

          &.color32::after {
            background: #2cd9c5;
          }
          &.color33::after {
            background: #b76100;
          }
          &.color34::after {
            background: #68c400;
          }
          &.color35::after {
            background: #e91cd5;
          }
          &.color36::after {
            background: #0ba162;
          }
          &.color37::after {
            background: #c0d11f;
          }
          &.long {
            flex: 0 0 100%;
          }
        }
      }
    }
  }
  .chart-3d {
    width: 100%;
    height: 100%;
  }
}
/deep/ .highcharts-legend-item rect.highcharts-point {
  width: 10px;
  height: 10px;
  x: 9;
  y: 9;
  rx: 2 !important;
  ry: 2 !important;
}
/deep/ .highcharts-text-outline {
  fill: none;
  stroke: none;
}
.grid-center {
  display: grid;
  grid-template-rows: 1.174fr 1fr;
  .center-map {
    position: relative;
  }
  .whole {
    position: absolute;
    left: 0;
    top: 0;
    width: 172px;
    height: 47px;
    line-height: 40px;
    background: url("~@img/cockpit/bg-title-normal.png") no-repeat;
    background-size: 100% 100%;
    z-index: 999;
    cursor: pointer;
    &.active {
      background: url("~@img/cockpit/bg-title-select.png") no-repeat;
    }
    span {
      font-size: 18px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #d9f9ff;
      vertical-align: middle;
    }
    img {
      width: 17px;
      height: 18px;
      margin: 0 8px 0 25px;
      vertical-align: middle;
    }
  }
  .map-box {
    width: 100%;
    height: 100%;
  }
  .charts_map {
    width: 100%;
    height: 100%;
  }
  .lun {
    width: 100%;
    height: 100%;
    background: url("~@img/cockpit/bg-content-mid.png") no-repeat;
    background-size: 100% 100%;
    .lun-title {
      margin: 0 20px;
      height: 48px;
      line-height: 48px;
      border-bottom: 1px solid rgba(0, 198, 221, 0.15);
      display: flex;
      justify-content: space-between;
      cursor: default;
      p {
        cursor: pointer;
      }
      p.right-p {
        text-align: right;
      }
      p.active {
        position: relative;
        border-bottom: 1px solid #4cadff;

        span {
          opacity: 1;
        }
      }
      img {
        width: 36px;
        height: 36px;
        vertical-align: middle;
      }
      .i-45 {
        width: 45px;
        height: 45px;
        vertical-align: middle;
      }
      span {
        display: inline-block;
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #ffffff;
        line-height: 36px;
        opacity: 0.5;
        background: linear-gradient(0deg, #bdedff 0%, #e7efff 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        vertical-align: middle;
      }
    }
  }
  .chart-title {
    height: 50px;
    line-height: 50px;
    text-align: center;
    img {
      width: 35px;
      height: 35px;
      vertical-align: middle;
    }
    span {
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #ffffff;
      vertical-align: middle;
      text-shadow: 0.2rem 0rem 0.4rem #0065b3, -0.2rem 0rem 0.4rem #0065b3, 0rem 0.2rem 0.4rem #0065b3,
        0rem -0.2rem 0.4rem #0065b3;
    }
  }
  .chart-bar {
    width: 100%;
    height: calc(100% - 100px);
    position: relative;
  }
  .lun-bar {
    width: 100%;
    height: 100%;
  }
}
.grid-right {
  display: grid;
  grid-template-rows: 1.174fr 1fr;
  grid-row-gap: 16px;
  .video-info {
    background: url("~@img/cockpit/bg-content-right1.png") no-repeat;
    background-size: 100% 100%;
    .video {
      width: 100%;
      height: 280px;
      overflow: hidden;
    }
  }

  .detail-info {
    max-height: 130px;
    padding: 20px;
    height: calc(100% - 280px);
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #bbe0fa;
    line-height: 28px;
    opacity: 0.8;
    overflow-y: auto;
    text-indent: 2em;
    cursor: default;
  }
  .list-p-j {
    background: url("~@img/cockpit/bg-content-right2.png") no-repeat;
    background-size: 100% 100%;
    .grid-title {
      p {
        float: left;
        margin-right: 16px;
        cursor: pointer;
        img {
          vertical-align: middle;
        }
        span {
          font-size: 18px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          color: #ffffff;
          background: linear-gradient(0deg, #bdedff 0%, #e7efff 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          vertical-align: middle;
          opacity: 0.5;
        }
      }
      p.active span {
        opacity: 1;
      }
    }
    .list-box {
      margin-top: 14px;
      max-height: 290px;
      height: calc(100% - 44px);
      overflow-y: auto;
      li {
        max-width: 555px;
        height: 48px;
        line-height: 48px;
        padding-left: 18px;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #bbe0fa;
        p {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        cursor: pointer;
        img {
          width: 14px;
          height: 14px;
          margin-right: 8px;
          vertical-align: middle;
        }
      }
      li:nth-of-type(even) {
        border-top: 1px solid rgba(0, 143, 253, 0.2);
        border-bottom: 1px solid rgba(0, 143, 253, 0.2);
        background: rgba(113, 205, 249, 0.1);
      }
    }
  }
  .list-flex {
    display: flex;
    justify-content: space-between;
    height: calc(100% - 44px);
    .po-title {
      width: 100%;
      height: 49px;
      line-height: 49px;
      background: rgba(113, 205, 249, 0.2);
      font-size: 18px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #ffffff;
      text-align: center;
    }
    & > div {
      flex: 0 0 276px;
      max-width: 276px;
      padding-top: 18px;

      ul.list-box {
        margin: 0;
        max-height: 240px;
      }
    }
  }
}
.scroll {
  scrollbar-color: #508bce; //滚动条轨道颜色   滚动条滑块的颜色
  scrollbar-width: 6px;
  scrollbar-width: thin; //thin模式下滚动条两端的三角按钮会消失
  &::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 6px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 6px;
  }
  &::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 6px;
    background: linear-gradient(0deg, #508bce);
  }
  &::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    background: #0d2756;
    border-radius: 6px;
  }
}
.lun-amplify {
  position: absolute;
  top: -2px;
  right: 30px;
  width: 90px;
  height: 24px;
  line-height: 24px;
  background: rgba(39, 110, 156, 0.5);
  box-shadow: 0px 0px 4px 0px rgba(0, 132, 255, 0.8), 0px 0px 16px 0px rgba(0, 156, 255, 0.31);
  border-radius: 5px;
  font-size: 12px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: rgba(255, 255, 255, 0.8);
  text-align: center;
  cursor: pointer;
  img {
    width: 12px;
    height: 12px;
    margin-right: 6px;
    vertical-align: middle;
  }
}
.box-alert {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.78);
  border: 1px solid #050001;
  z-index: 9999;
  .chart-alert {
    padding-top: 40px;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -678px;
    width: 1356px;
    height: 410px;
    background: url("~@img/cockpit/bg-alert.png") no-repeat;
    background-size: 100% 100%;
  }
  .alert-title {
    text-align: center;
    height: 50px;
    line-height: 50px;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #ffffff;
    img {
      vertical-align: middle;
    }
  }
  .close-img {
    position: absolute;
    right: 50px;
    top: 35px;
  }
  .alert-bar {
    margin: 0 auto;
    width: 1218px;
    height: 270px;
  }
}

/deep/ .el-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 780px;
  height: 280px;
  margin-left: -390px;
  margin-top: -140px !important;
  background: #ffffff;
  box-shadow: 0px 5px 50px 0px rgba(186, 186, 186, 0.5);
  border-radius: 20px;
}
/deep/ .el-dialog__header {
  width: 604px;
  margin: 0 auto;
  padding: 0;
  height: 80px;
  line-height: 80px;
  text-align: center;
  border-bottom: 1px dashed #dddddd;
}
/deep/ .el-dialog__body {
  padding: 0 20px;
}

/deep/ .el-dialog__title {
  font-size: 30px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #446db3;
}
/deep/ .el-dialog__body {
  text-align: center;
}
/deep/ .el-dialog__headerbtn {
  top: 4px;
}
/deep/ .el-dialog__headerbtn:hover i {
  color: #446db3;
}
/deep/ .el-dialog__headerbtn i {
  font-size: 30px;
  color: #446db3;
  font-weight: bold;
}

/deep/ .el-dialog__body {
  span {
    display: inline-block;
    width: 120px;
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333;
  }
  span.tips {
    margin: 20px 0;
    width: 100%;
    font-size: 24px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333;
  }
  text-align: center;
}
/deep/ .el-dialog__footer {
  padding: 0;
  text-align: center;
  padding: 20px 0;
}
/deep/.el-dialog .el-button--default {
  width: 247px;
  height: 48px;
  line-height: 0.8;
  border-radius: 10px;
  font-size: 26px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #446db3;
  border: 2px solid #446db3;
}
/deep/.el-dialog .el-button--primary {
  width: 247px;
  height: 48px;
  line-height: 0.8;
  // background: linear-gradient(90deg, #1a6dc1, #446DB3);

  background: #446db3;
  box-shadow: 0px 2px 5px 0px rgba(68, 109, 179, 0.5);
  border-radius: 10px;
  font-size: 26px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #fff;
}

.flex_dialog {
  display: flex;
  .flex-steps {
    flex: 0 0 150px;
    height: 650px;
  }
  .flex-from {
    flex: 1;
  }
}
/deep/ .el-dialog__body .pro_plus span {
  width: 200px;
}
/deep/.dialog_box .pro_plus .el-input {
  width: 400px;
}
.pro_plus .pos_f .pos {
  right: 120px;
}
/deep/.el-dialog__body .el-select__tags span span {
  width: 120px;
  span {
    width: 80px;
  }
}
.grid-right .list-p-j .grid-title p:last-of-type {
  margin-right: 0;
}
/*
  *常用电脑尺寸  1680 * 900
  *              1536 * 864
  *              1440 * 900
  *ipad pro      1366 * 1024
  *ipad mini     1024 * 768
  *ipad          1024 * 768
 */
/*分辨率低于1680，采用下面的样式*/
@media screen and (max-device-width: 1680px) {
  .grid-left > div {
    height: 240px;
    .flex-p span {
      font-size: 14px;
    }
  }
  .grid-right .list-flex > div {
    flex: 0 0 243px;
    max-width: 243px;
  }
  .list-p-j {
    height: 348px;
  }
}
/*分辨率低于1536，采用下面的样式*/
@media screen and (max-device-width: 1536px) {
  .grid-left {
    height: 666px;
    grid-row-gap: 6px;
  }
  .grid-left > div {
    height: 200px;
    .flex-p span {
      font-size: 12px;
    }
  }
  .grid-left > div .p-h32 span {
    font-size: 14px;
  }
  .grid-left > div.h-240 {
    height: 240px;
  }
  .grid-left > div .flex-p {
    height: 34px;
    line-height: 34px;
  }
  .grid-left > div .p-h32 {
    height: 28px;
    line-height: 28px;
  }
  .grid-center .center-map,
  .grid-center .charts_map {
    height: 340px;
  }

  .grid-center .chart-title span {
    font-size: 14px;
  }
  .grid-center .lun .lun-title span {
    font-size: 14px;
  }
  .grid-right {
    height: 660px;
  }
  .list-p-j {
    height: 302px;
  }
  .grid-right .list-flex > div {
    flex: 0 0 218px;
    max-width: 218px;
  }
  .grid-right .list-flex > div ul.list-box {
    max-height: 170px;
  }
  .grid-right .list-p-j .list-box li {
    max-width: 436px;
  }
  .grid-right .list-p-j .list-box {
    max-height: 226px;
  }

  .grid-right .list-p-j .grid-title p {
    margin-right: 8px;
    span {
      font-size: 14px;
    }
  }
  .grid-left > div .rotation {
    height: 26px;
    line-height: 26px;
    text-align: center;
  }
  .grid-left > div .p-h32 {
    height: 24px;
    line-height: 24px;
  }
  .grid-right .video-info .video {
    width: 100%;
    height: 218px;
    overflow: hidden;
  }
  .grid-right .detail-info[data-v-51d35360] {
    max-height: 130px;
    padding: 20px;
    height: calc(100% - 218px);
  }
  .vjs-poster {
    height: 218px;
  }
}
/*分辨率低于1440，采用下面的样式*/
@media screen and (max-device-width: 1440px) {
  .grid-left > div .flex-p span {
    font-size: 12px;
    white-space: nowrap;
  }
  .grid-left > div {
    height: 236px;
  }
  .grid-left {
    grid-row-gap: 16px;
  }
  .grid-center .lun {
    margin-top: -18px;
  }
  .grid-right .list-p-j .list-box li {
    max-width: 406px;
  }
  .grid-right .list-flex > div {
    flex: 0 0 202px;
    max-width: 202px;
  }
  .list-p-j {
    height: 310px;
  }
  .grid-right .list-flex > div ul.list-box {
    max-height: 190px;
  }
  .grid-right .list-p-j .list-box {
    max-height: 246px;
  }

  .grid-right .list-p-j .grid-title p {
    margin-right: 8px;
    span {
      font-size: 12px;
    }
  }
}
/*分辨率低于1366，采用下面的样式*/
@media screen and (max-device-width: 1366px) {
  .grid-center .center-map,
  .grid-center .charts_map {
    height: 450px;
  }
  .lun-title span {
    display: inline-block;
    font-size: 14px;
  }
  .grid-left > div .p-h32 {
    height: 36px;
    line-height: 36px;
  }
  .grid-left > div .flex-p {
    height: 40px;
    line-height: 40px;
  }
  .grid-left > div {
    height: 280px;
  }
  .grid-left > div .flex-p span:first-of-type {
    margin-left: 4px;
  }
  .grid-left > div .p-h32 span {
    font-size: 14px;
  }
  .grid-center .lun .lun-title span {
    font-size: 12px;
  }
  .grid-center .lun {
    margin-top: -46px;
  }
  .grid-right .list-p-j .list-box li {
    max-width: 382px;
  }
  .grid-right .list-flex > div {
    flex: 0 0 190px;
    max-width: 190px;
  }
  .list-p-j {
    height: 408px;
  }
  .grid-right .list-flex > div ul.list-box {
    max-height: 290px;
  }
  .grid-right .list-p-j .list-box {
    max-height: 346px;
  }
  .grid-right .list-flex > div {
    flex: 0 0 190px !important;
    max-width: 190px !important;
  }
  .grid-center .chart-title span {
    font-size: 12px;
  }
  .grid-right .list-flex .po-title {
    font-size: 14px;
  }
  .grid-right .list-p-j .list-box li {
    font-size: 12px;
  }
  .box-alert .chart-alert {
    transform: scale(0.8);
    -moz-transform: scale(0.8);
    -webkit-transform: scale(0.8);
    -o-transform: scale(0.8);
  }
}
/*分辨率低于1180，采用下面的样式*/
@media screen and (max-device-width: 1180px) {
  .grid-left > div {
    height: 228px;
    .flex-p span {
      font-size: 12px;
    }
  }
  .grid-left > div.h-240 {
    height: 240px;
  }
  .grid-left > div.h-200 {
    height: 200px;
  }
  .grid-left > div.m-t-1 {
    margin-top: -36px;
  }
  .grid-left > div.m-t-2 {
    margin-top: -40px;
  }
  .grid-left > div .rotation {
    height: 30px;
    line-height: 30px;
    text-align: center;
  }
  .grid-left > div .flex-p {
    height: 30px;
    line-height: 30px;
    flex-wrap: nowrap;
  }
  .grid-left > div .flex-p span {
    font-size: 12px;
    transform: scale(0.8);
    -moz-transform: scale(0.8);
    -webkit-transform: scale(0.8);
    -o-transform: scale(0.8);
    margin-left: -12px;
  }

  .grid-left > div .p-h32 {
    height: 30px;
    line-height: 30px;
  }
  .grid-center .center-map,
  .grid-center .charts_map {
    height: 400px;
  }
  .grid-right .list-p-j .list-box li {
    max-width: 326px;
  }
  .grid-right .list-p-j .grid-title p span {
    font-size: 14px;
  }
  .list-p-j {
    height: 260px;
  }
  .grid-right .list-p-j .list-box {
    max-height: 200px;
  }
  .grid-right .list-flex > div {
    flex: 0 0 164px !important;
    max-width: 164px !important;
  }

  .grid-right .list-p-j .grid-title p {
    margin-right: 8px;
    span {
      font-size: 12px;
    }
  }
}
/*分辨率低于1024，采用下面的样式*/
@media screen and (max-device-width: 1024px) {
  .grid-left > div .p-h32 span {
    font-size: 12px;
  }

  .grid-left > div .p-h32 span {
    margin-left: 2px;
  }
  .grid-left {
    height: 648px;
  }
  .grid-right .list-p-j .list-box li {
    max-width: 278px;
  }
  .grid-right .list-p-j .grid-title p {
    margin-right: 20px;
  }
  .grid-right .list-p-j .grid-title p span {
    font-size: 12px;
  }
  .grid-right .list-flex > div {
    flex: 0 0 164px !important;
    max-width: 140px !important;
  }
  .list-p-j {
    height: 214px;
  }
  .grid-right .list-flex > div ul.list-box {
    max-height: 100px;
  }
  .grid-right .list-p-j .list-box {
    max-height: 150px;
  }
  .grid-center .center-map,
  .grid-center .charts_map {
    height: 300px;
  }
  .grid-center .lun {
    margin-top: -75px;
  }
  .grid-right .list-p-j .grid-title p {
    margin-right: 8px;
    span {
      font-size: 12px;
    }
  }
  .grid-right .list-p-j .grid-title p {
    margin-right: 0px;
    img {
      width: 24px;
    }
  }
  .grid-center .lun .lun-title {
    margin: 0 4px;
  }
  .grid-center .lun .lun-title .i-45 {
    width: 28px;
    height: 28px;
  }
  .grid-center .lun .lun-title img {
    width: 28px;
    height: 28px;
  }
  .grid-center .lun .lun-title p.right-p {
    text-align: right;
    transform: scale(0.82);
    -moz-transform: scale(0.82);
    -webkit-transform: scale(0.82);
    -o-transform: scale(0.82);
  }
  .grid-left > div .grid-title span {
    font-size: 14px;
  }
  .grid-left > div.h-200 {
    height: 180px;
  }
  .grid-left > div .rotation {
    height: 20px;
    line-height: 12px;
  }
  .grid-left > div .rotation .time {
    font-size: 14px;
  }
  .grid-left > div .p-h32 {
    height: 24px;
    line-height: 24px;
  }
  .grid-left > div {
    height: 200px;
  }
  .grid-left > div.m-t-1 {
    margin-top: -32px;
  }
  .grid-center .chart-title {
    max-width: 200px;
    white-space: nowrap;
    transform: scale(0.8);
    -moz-transform: scale(0.8);
    -webkit-transform: scale(0.8);
    -o-transform: scale(0.8);
    transform-origin: 0;
  }
  .box-alert .chart-alert {
    transform: scale(0.7);
    -moz-transform: scale(0.7);
    -webkit-transform: scale(0.7);
    -o-transform: scale(0.7);
  }
  .lun-amplify {
    transform-origin: 0 0;
    transform: scale(0.8);
    -moz-transform: scale(0.8);
    -webkit-transform: scale(0.8);
    -o-transform: scale(0.8);
    right: 0;
  }
  .grid-center .whole.active {
    transform-origin: 0 0;
    transform: scale(0.8);
    -moz-transform: scale(0.8);
    -webkit-transform: scale(0.8);
    -o-transform: scale(0.8);
  }
}
</style>
// 修改视频样式
<style>
/* .video-js .vjs-tech {
  height: 280px;
  background: #000;
} */
.video-js.vjs-fluid,
.video-js.vjs-16-9,
.video-js.vjs-4-3,
.video-js.vjs-9-16,
.video-js.vjs-1-1 {
  height: 280px !important;
  padding-top: 280px !important;
}
.vjs_video_665-dimensions.vjs-fluid {
  padding-top: 280px !important;
}
.vjs_video_3-dimensions.vjs-fluid {
  padding-top: 280px !important;
}

.video .video-js .vjs-big-play-button {
  top: 50%;
  left: 50%;
  margin-left: -33px;
  margin-top: -33px;
  height: 66px;
  width: 66px;
  line-height: 66px;
  border-radius: 50%;
  border: none;
  background-color: transparent;
  transition: all 0.4s;
}
.video-js:hover .vjs-big-play-button {
  background-color: transparent;
}

.video .video-js .vjs-big-play-button .vjs-icon-placeholder:before {
  background: url("~@img/cockpit/icon-play.png") no-repeat;
  background-size: 100% 100%;
  content: "";
  border: none;
  opacity: 0.9;
}
.video-js:hover .vjs-big-play-button .vjs-icon-placeholder:before {
  opacity: 1;
}
/*分辨率低于1536，采用下面的样式*/
@media screen and (max-device-width: 1536px) {
  .vjs-poster {
    height: 218px !important;
  }
}
</style>
